<template>
  <div class="loginPage">
    <div class="box">
      <div class="top">后台管理系统</div>
      <a-input style="margin-top: 20px;"  size="large" type="text" placeholder="请输入用户名" v-model="name">
        <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
      </a-input>

      <a-input style="margin-top: 20px;" size="large" type="password" placeholder="请输入密码" v-model="password">
        <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" />
      </a-input>

      <a-button style="margin-top: 20px;"  type="primary" size="large" @click="handleSubmit">登录</a-button>
    </div>
  </div>
</template>

<script>
import { register } from '../api/login'

import { md5 } from '../utils/md5'

export default {
  data () {
    return {
      name: '',
      password: '',
      tsName: '',
      tsPassword: '',
      formLayout: 'horizontal'
      // form: this.$form.createForm(this, { name: 'coordinated' })
    }
  },
  methods: {
    handleSubmit () {
      console.log('111', this.name)
      console.log('222', this.password)
      const params = {
        userName: this.name,
        password: md5(this.password)
      }

      console.log('触发', params)

      register(params).then(res => {
        // eslint-disable-next-line eqeqeq
        if (res.resultStatus == true) {
          console.log('触发', res)
          this.$router.push({
            path: '/admin'
          })
          localStorage.setItem('isLogin', true)
          localStorage.setItem('info', JSON.stringify(res.resultData))
          localStorage.setItem('accessToken', res.resultData.accessToken)
          this.$store.commit('infoMet', res.resultData)
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.loginPage {
  width: 100%;
  height: 100%;
  padding-top: 150px;
  background: #f5f5f5 url('../assets/img/background.a568162c.svg') no-repeat 50%;
}

.box {
  width: 450px;
  margin: 0 auto;

  .top {
    font-size: 22px;
    text-align: center;
    margin-bottom: 30px;
  }
}

.ant-btn {
  width: 450px !important;
}
</style>
